<template>
  <div class='container'>
    <el-card>
      <el-h3>6组_刘志晶</el-h3><br><br>
        <span>关键字: </span> &nbsp;
        <el-input v-model="keyword"
            style="width:300px;display: inline-block"
            placeholder="请输入编号">
        </el-input>
            <el-button type="primary"
            style="float:right"
            @click="search">搜索
        </el-button>
        <el-button style="float:right;margin-right:10px" @click="clear">清除</el-button>
        <!-- 数据一共有{{allCount}}条 -->
        <div style="padding: 10px 0">
          <el-alert
          type="info"
          :description="sum_counts"
          show-icon>
         </el-alert>
        </div>
        <!-- <div class="dataCount">
          <i class="el-icon-info">数据一共有{{allCount}}条</i>
        </div> -->
        <!-- getranDoms -->
      <el-table
          v-loading="loading"
          :data="tableData"
          style="width: 100%">
      <el-table-column
        prop="id"
        label="编号"
        width="190">
      </el-table-column>
      <el-table-column
        label="题型"
        width="100">
        <template slot-scope="scope">
          <span v-if="scope.row.questionType === '1'">单选</span>
          <span v-if="scope.row.questionType === '2'">多选</span>
          <span v-if="scope.row.questionType === '3'">简答</span>
        </template>
      </el-table-column>
      <el-table-column
        label="题目编号"
         width="190">
        <template slot-scope="scope">
          <p style="color:#1495ff;cursor:pointer"
          v-for="(item, idx) in scope.row.questionIDs"
          @click="getDetail(item.id)"
          :key="idx">
          {{item.number}}
          </p>
        </template>
      </el-table-column>
      <el-table-column
        prop="addTime"
         width="190"
        label="录入时间">
      </el-table-column>
      <el-table-column
      width="190"
        prop="totalSeconds"
        label="答题时间">
      </el-table-column>
      <el-table-column
      width="100"
        prop="accuracyRate"
        label="正确率">
      </el-table-column>
      <el-table-column
        prop="userName"
        width="190"
        label="录入人">
      </el-table-column>
      <el-table-column
      width="190"
        label="操作">
        <template slot-scope="scope">
          <el-button type="danger" icon="el-icon-delete" circle @click="hDel(scope.row.id)"></el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
      <el-pagination
      :disabled='loading'
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page.sync="page"
      :page-sizes="[10, 20, 30, 40]"
      :page-size= pageSize
      background
      layout="prev, pager, next, sizes, jumper"
      :total="allCount">
    </el-pagination>
    </el-card>
    <el-dialog
      title="题目预览"
      :visible.sync="articleShow"
      v-if='articleShow'
      width="40%"
      center>
      <questions-preview ref="quest"  :previewQues='artcileObj'></questions-preview>
      <span slot="footer" class="dialog-footer">
        <el-button @click="articleShow = false">关闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
// import { Load } from 'element-ui'
import QuestionsPreview from '../components/questions-preview'
import { randoms, removeRandoms, detail } from '@/api/hmmm/questions'
export default {
  name: 'QuestionRandom',
  components: {
    QuestionsPreview
  },
  data () {
    return {
      sum_counts: null,
      loading: false, // loading加载
      articleShow: false, // 关闭题目预览
      keyword: null, // 搜索
      tableData: [], // log加载
      allCount: null, // 总条数
      page: 1, // 当前页码
      pageSize: 20, // 每页多少条
      questionID: null, // 试题ID
      artcileObj: {} // 题目预览数据
    }
  },
  created () {
    this.getranDoms()
  },
  methods: {
    // 获取到点击的问题idc
    async getDetail (artId) {
      const res = await detail({
        id: artId
      })
      this.artcileObj = res.data
      this.artcileObj.subject = this.artcileObj.subjectName
      this.artcileObj.catalog = this.artcileObj.directoryName
      this.articleShow = true
    },
    // 删除对应题组
    hDel (id) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        removeRandoms({
          id: id
        })
        this.$message('删除成功!')
        this.getranDoms()
      }).catch(() => {
        this.$message('已取消删除')
      })
    },
    // 每页显示多少条数据
    async handleSizeChange (newSize) {
      this.loading = true
      const res = await randoms({
        page: 1,
        pagesize: newSize
      })
      // console.log(`每页 ${newSize} 条`)
      this.tableData = res.data.items
      this.loading = false
    },
    // 切换页码 数据进行刷新
    async handleCurrentChange (val) {
      this.page = val
      const res = await randoms({
        page: this.page
      })
      this.tableData = res.data.items
      this.loading = false
      console.log(`当前页: ${val}`)
    },
    // 点击清除之后
    async clear () {
      this.loading = true
      this.keyword = null
      const res = await randoms()
      // 数据再次刷新
      this.tableData = res.data.items
      this.loading = false
    },
    // 点击搜索按钮,按关键字搜索
    async search (page) {
      this.loading = true
      const res = await randoms({
        keyword: this.keyword
      })
      // 搜索跳转到第1页
      this.tableData = res.data.items
      this.page = page
      this.loading = false
    },

    // 获取题组列表
    async getranDoms () {
      this.loading = true
      const res = await randoms()
      // 获取列表总条数
      this.allCount = res.data.counts
      this.sum_counts = `一个有${this.allCount}条数据`
      // 列表
      this.tableData = res.data.items
      this.loading = false
      console.log(this.tableData)
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.dataCount {
  background-color:#f4f4f5;
  height: 40px;
  line-height:40px;
  margin: 10px 0 20px;
  i {
    color: #909399;
  }
}
.el-pagination {
  float: right;
  margin-top: 20px;
}
.el-card {
  margin:20px
}
</style>
